<template>
	<view class="layer">
		<comHeader :config="navConfig" :rightIcoTapHandle="rightIcoTapHandle"/>
		<!-- <view class="disp">
			<view  class="dislinput"><input type="text" placeholder="请输入搜索内容"></view>
			<view class="dislbutton"> <button >搜索</button></view>
		</view> -->
		<!-- <navigator url="JQcollection">
			<image class="souSuo" src="../../../static/myPic/sousuo.png"></image>
		</navigator> -->
		<view class="create" @tap="newtitle">
			
			<view><image class="biaoqian" src="../../../static/myPic/biaoQianBlue.png"></image></view>
			<view class="createNew"><text>创建新专辑</text></view>
			<view><image class="jiantou" src="../../../static/jiantou.png"></image></view>
			
		</view>
	
		<navigator class="jingqu" url="/pages/my/myCollection/JQcollection">
			<view class="JQtext" @tap="goCollectDetail">旅游景区</view>
			<view><image class="bianji" src="../../../static/myPic/bianJiBi.png"></image></view>
			<view class="JQcollection">226条收藏</view>
			<view class="pic1">
				<image class="one" src="../../../static/myPic/stln.jpg"></image>
				<image class="two" src="../../../static/myPic/stln.jpg"></image>
				<image class="two" src="../../../static/myPic/stln.jpg"></image>
				<image class="two" src="../../../static/myPic/stln.jpg"></image>
			</view>
		</navigator>
		
		<view class="xiaochi">
			<view class="XCtext">美食小吃</view>
			<view><image class="bianji" src="../../../static/myPic/bianJiBi.png"></image></view>
			<view class="XCcollection">10条收藏</view>
			<view class="pic2">
				<image class="one" src="../../../static/myPic/huoguo.jpg"></image>
				<image class="two" src="../../../static/myPic/huoguo.jpg"></image>
				<image class="two" src="../../../static/myPic/huoguo.jpg"></image>
				<image class="two" src="../../../static/myPic/huoguo.jpg"></image>
			</view>
		</view>
		
		<view class="jiudian">
			<view class="JDtext">酒店住宿</view>
			<view><image class="bianji" src="../../../static/myPic/bianJiBi.png"></image></view>
			<view class="JDcollection">6条收藏</view>
			<view class="pic3">
				<image class="one" src="/static/myPic/binguan.png"></image>
				<image class="two" src="../../../static/myPic/binguan.png"></image>
				<image class="two" src="../../../static/myPic/binguan.png"></image>
				<image class="two" src="../../../static/myPic/binguan.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				navConfig:{
					isFixed:false, //是否absolute布局
					comScroll:0,
					left:{
						
						isShowLeft:true,
						leftGobackColor:'black', //左边返回icon颜色
					},
					mid:{
						isShowMid:true,
						text:'我的收藏'
					},
					right:{
						text:'',
						isShowRight:true,
						ico:'/static/myPic/sousuo.png',//右侧图标地址
						isShowRightIco:true,//是否显示右侧图标
					}
				},
				
			}
		},
		methods:{
			
			newtitle(){
				uni.navigateTo({
					url: '/pages/my/myCollection/createNew'
				});
			},
			goCollectDetail(){
				uni.navigateTo({
					url: '/pages/my/myCollection/JQcollection'
				});
			},
			rightIcoTapHandle(){
				console.log(999999);
				uni.navigateTo({
					url:'/pages/my/myCollection/SCsousuo'
				})
			}
		},
	}
	
</script>

<style>
	.layer{
		width: 750upx;
		height: 1334upx;
		background-color: #FFFFFF;
	}
	.souSuo image{
		margin-left: 677upx;
		margin-top: -59upx;
		width: 33upx;
		height: 33upx;
		position: absolute;
	}
	/*创建新标签*/
	.create{
		width: 690upx;
		height: 80upx;
		margin-left: 31upx;
		/* margin-top: 162upx; */
		border-radius: 10upx;
		border: 1upx #B6B6B6;
		background: #FFFFFF;
		box-shadow: 0upx 0upx 15upx 0upx #E8E8E8;
		z-index: 99;
		margin-top: 150upx;
	}
	.biaoqian{
		width: 31upx;
		height: 30upx;
		float: left;
		margin-left: 29upx;
		margin-top: 25upx;
	}
	.createNew{
		width: 160upx;
		height: 29upx;
		line-height: 29upx;
		font-size: 32upx;
		font-family: PingFang SC Regular;
		color: #2E8EFF;
		margin-left: 17upx;
		margin-bottom: 27upx;
		/* margin-top: -20upx; */
	}
	
	.jiantou{
		width: 20upx;
		height: 25upx;
		color: #A7A7A7;
		margin-left: 408upx;
	}
	.create>view{display: inline-block;}
	
	/*旅游景区*/
	.jingqu{
		width: 690upx;
		height: 328upx;
		background: #FFFFFF;
		border: 1upx #B6B6B6;
		box-shadow: 0upx 0upx 15upx 0upx rgba(232,232,232,1);
		margin-left: 31upx;
		margin-top: 18upx;
	}
	.JQtext{
		width: 125upx;
		height: 28upx;
		font-size: 30upx;
		font-family: PingFang SC Regular;
		color: rgba(51,51,51,1);
		margin-left: 28upx;
		margin-top: 36upx;
		float: left;
	}
	.bianji{
		width: 21upx;
		height: 23upx;
		margin-left: 492upx;
		margin-top: 41upx;
	}
	.JQcollection{
		width: 120upx;
		height: 19upx;
		font-size: 20upx;
		font-family: PingFang SC Regular;
		color: rgba(153,153,153,1);
		margin-left: 28upx;
		margin-top: 21upx;
	}
	.pic1 image{
		border-radius: 10upx;
		width: 150upx;
		height: 150upx;
	}
	.pic1 .one{
		float: left;
		margin-left: 27upx;
		margin-top: 32upx;
	}
	.pic1 .two{
		margin-left: 11upx;
		margin-top: 32upx;
	}
	
	/*美食小吃*/
	.xiaochi{
		width: 690upx;
		height: 328upx;
		background: #FFFFFF;
		border: 1upx #B6B6B6;
		box-shadow: 0upx 0upx 15upx 0upx rgba(232,232,232,1);
		margin-left: 31upx;
		margin-top: 18upx;
	}
	.XCtext{
		width: 125upx;
		height: 28upx;
		font-size: 30upx;
		font-family: PingFang SC Regular;
		color: rgba(51,51,51,1);
		margin-left: 28upx;
		margin-top: 36upx;
		float: left;
	}
	.bianji{
		width: 21upx;
		height: 23upx;
		margin-left: 492upx;
		margin-top: 41upx;
	}
	.XCcollection{
		width: 120upx;
		height: 19upx;
		font-size: 20upx;
		font-family: PingFang SC Regular;
		color: rgba(153,153,153,1);
		margin-left: 28upx;
		margin-top: 21upx;
	}
	.pic2 image{
		border-radius: 10upx;
		width: 150upx;
		height: 150upx;
	}
	.pic2 .one{
		float: left;
		margin-left: 27upx;
		margin-top: 32upx;
	}
	.pic2 .two{
		margin-left: 11upx;
		margin-top: 32upx;
	}
	
	/*酒店住宿*/
	.jiudian{
		width: 690upx;
		height: 328upx;
		background: #FFFFFF;
		border: 1upx #B6B6B6;
		box-shadow: 0upx 0upx 15upx 0upx rgba(232,232,232,1);
		margin-left: 31upx;
		margin-top: 18upx;
	}
	.JDtext{
		width: 125upx;
		height: 28upx;
		font-size: 30upx;
		font-family: PingFang SC Regular;
		color: rgba(51,51,51,1);
		margin-left: 28upx;
		margin-top: 36upx;
		float: left;
	}
	.bianji{
		width: 21upx;
		height: 23upx;
		margin-left: 492upx;
		margin-top: 41upx;
	}
	.JDcollection{
		width: 120upx;
		height: 19upx;
		font-size: 20upx;
		font-family: PingFang SC Regular;
		color: rgba(153,153,153,1);
		margin-left: 28upx;
		margin-top: 21upx;
	}
	.pic3 image{
		border-radius: 10upx;
		width: 150upx;
		height: 150upx;
	}
	.pic3 .one{
		float: left;
		margin-left: 27upx;
		margin-top: 32upx;
	}
	.pic3 .two{
		margin-left: 11upx;
		margin-top: 32upx;
	}
	.disp{
		display: flex;
		width: 690upx;
		margin:30upx auto;
		justify-content: space-between;
	}
	.dislbutton{
		float: right;
	}
	.dislbutton button{
		color: #FFFFFF;
		background-color:#2E8EFF;
		border: 1px solid #2E8EFF;
		font-size: 28upx;
		width: 130upx;
		height: 50upx;
		line-height: 50upx;
		
	}
	.dislinput input{
		width: 500upx;
		height: 50upx;
		padding-left: 20upx;
		border: 1px solid #2E8EFF;
		border-radius:30upx;
		font-size: 14px;
		line-height: 50upx;
	}
</style>